<template>
    <div>
        <h1>事件</h1>
        <!-- 原生DOM事件 -->
        <pre @click="handler">
      大江东去浪淘尽,千古分流人物
    </pre>
        <button @click="handler1(1,2,3,4,5,$event)">点我传递多个参数</button>
        <hr/>


        <!--
        vue2框架当中:这种写法自定义事件,可以通过.native修饰符变为原生DOM事件
        vue3框架下面写法其实即为原生DOM事件

        vue3:原生的DOM事件不管是放在标签身上、组件标签身上都是原生DOM事件
      -->
        <Event1 @click="handler2"></Event1>


        <!--自定义事件-->
        <Event2 @selfDefineEvent="selfDefineEvent1"></Event2>

    </div>
</template>

<script setup lang="ts">

  // 引入子组件-原生事件
  import Event1 from "./Event1.vue";

  // 引入子组件-自定义事件
  import Event2 from "./Event2.vue";

  // 原生DOM事件-事件回调----1
  // const handler = () => {
  //   alert(12306)
  // }
  const handler = (event) => {
    alert(JSON.stringify(event));
  };
  const handler1 = (a, b, c, d, e, $event) => {
    alert(a + " " + b + " " + c + " " + d + " " + e + " " + JSON.stringify($event));
  };
  // 原生DOM事件的绑定是给子组件的根div节点绑定的事件
  const handler2 = () => {
    alert(12306);
  };


  // 自定义事件--触发，通过子组件内部触发
  const selfDefineEvent1 = (param1, param2) => {
    alert(JSON.stringify(param1) + " " + param2);
  };


</script>

<style scoped>
</style>